<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				font-family: Arial, Helvetica, sans-serif;
			}

			* {
				box-sizing: border-box;
			}

			/* Create a column layout with Flexbox */
			.row {
				display: flex;
			}

			/* Left column (menu) */
			.left {
				flex: 35%;
				padding: 15px 0;
			}

			.left h2 {
				padding-left: 8px;
			}

			/* 右侧(内容) */
			.right {
				flex: 65%;
				padding: 15px;
			}

			/* 搜索框 */
			#mySearch {
				width: 100%;
				font-size: 18px;
				padding: 11px;
				border: 1px solid #ddd;
			}

			/* 左侧导航 */
			#myMenu {
				list-style-type: none;
				padding: 0;
				margin: 0;
			}

			#myMenu li a {
				backgrxound-color: #f6f6f6;
				padding: 12px;
				text-decoration: none;
				font-size: 18px;
				color: black;
				display: block
			}

			#myMenu li a:hover {
				background-color: #eee;
			}
		</style>
	</head>
	<body>
		<div class="row">
			<div class="left" style="background-color:#bbb;">
				<h2>菜单</h2>
				<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="搜索.." title="输入分类">
				<ul id="myMenu">
					<li><a href="#">HTML</a></li>
					<li><a href="#">CSS</a></li>
					<li><a href="#">JavaScript</a></li>
					<li><a href="#">PHP</a></li>
					<li><a href="#">Python</a></li>
					<li><a href="#">jQuery</a></li>
					<li><a href="#">SQL</a></li>
					<li><a href="#">Bootstrap</a></li>
					<li><a href="#">Node.js</a></li>
					<li><a href="#">中文分类</a></li>
				</ul>
			</div>

			<div class="right" style="background-color:#ddd;">
				<h2>内容</h2>
				<p>在搜索框输入菜单列表的分类名搜索对应内容。</p>
				<p>Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
				<p>Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
				<p>Some text..</p>
			</div>
		</div>

		<script type="text/javascript">
			function myFunction() {
				var input, filter, ul, li, a, i;
				input = document.getElementById("mySearch");
				filter = input.value.toUpperCase();
				ul = document.getElementById("myMenu");
				li = ul.getElementsByTagName("li");
				for (i = 0; i < li.length; i++) {
					a = li[i].getElementsByTagName("a")[0];
					if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
						li[i].style.display = "";
					} else {
						li[i].style.display = "none";
					}
				}
			}
		</script>
	</body>
</html>
